<template>
  <!--  v-loading="loading" element-loading-background="rgba(255, 255,255,0.8)"-->
  <!--  element-loading-text="拼命加载中..." element-loading-spinner=".el-loading-spinner"-->
  <el-container class="documentIpt_all" v-show="!loading">
    <el-header class="documentIpt_header" height="120px">
      <p :class="{ shifted: drawerVisible }">文件上传</p>
      <!-- <el-breadcrumb
        class="p_bottom"
        separator=">>"
        :class="{ shifted: drawerVisible }">
        <el-breadcrumb-item :to="{ path: '/' }">HOME</el-breadcrumb-item>
        <el-breadcrumb-item>FILE-UPLOAD</el-breadcrumb-item>
      </el-breadcrumb> -->
      <!-- <el-button
        size="large"
        type="primary"
        class="documentIpt_btn"
        @click="drawerVisible = true">
        <span class="long-arrow-left">←|</span>
      </el-button> -->
    </el-header>
    <!--    accept=".docx"-->
    <el-main class="documentIpt_main">
      <div class="left" :class="{ shifted: drawerVisible }">
        <el-alert :closable="false" title="* 试用期间仅生成10页内容的知识点,  请上传word/pdf课程教材，且不超过 100MB" type="warning" />

        <!-- :http-request="customUpload"
          :auto-upload="false" -->

        <el-upload v-loading="extrLoading" class="upload" ref="upload" drag :data="uploadParams"
          :action="`${store.extractURI}/upload`" :limit="1" :on-exceed="handleExceed" :on-success="handleSuccess"
          :on-error="handleError" :on-change="handleFileChange" :on-remove="handleRemove"
          :before-upload="handleBeforeUpload" accept=".pdf,.doc,.docx">
          <div class="el-upload-area">
            <div class="loading" v-show="btnLoading">
              <img src="@/assets/loading2.gif" />
              <span>文件正在上传</span>
            </div>
            <el-icon class="el-icon--upload" style="margin-top: 10px"><upload-filled /></el-icon>
            <div class="el-upload__text" style="text-align: center; font-size: 16px; font-weight: bold">
              将文件拖拽到此处，或 <em>点击上传</em>
            </div>
          </div>
        </el-upload>

        <div class="buttons-container">
          <!-- <el-button
            size="large"
            type="warning"
            class="documentIpt_btn"
            @click.stop="submitUpload"
            v-loading="btnLoading"
            >文件上传</el-button
          > -->
          <el-button size="large" type="primary" class="documentIpt_btn" @click.stop="submittextStructure"
            :disabled="extrLoading">知识点生成</el-button>
          <!-- <el-button
            size="large"
            type="primary"
            class="documentIpt_btn"
            @click="goToSearchPage"
            >返回</el-button
          > -->
          <!--          <el-button size="large" type="primary" class="documentIpt_btn" @click="gotoNext">跳转</el-button>-->
        </div>
      </div>
      <!-- 文档内容抽屉 ，已废弃-->
      <div class="side-panel" :class="{ active: drawerVisible }">
        <div class="title-container" style="position: sticky; top: 0">
          <h2 class="title">文件预览</h2>
          <el-button class="close-btn" @click="handleClose">
            <el-icon class="el-icon--close" style="position: absolute; top: 0; right: 10px">×</el-icon>
          </el-button>
        </div>
        <div v-if="fileContent" class="file-content">
          <pre>{{ fileContent }}</pre>
        </div>
      </div>
    </el-main>
  </el-container>

  <el-container class="loadingall" v-show="loading">
    <div class="loadingleft">
      <img src="../assets/rerun.gif" alt="Loading Image"
        style="width: 300px; height: 200px; margin-top: 190px; margin-left: 130px" />
      <!--      <h1 style="font-size: 32px;margin-top: 190px;margin-left: 130px">知识点抽取</h1>-->
      <div class="progress-container">
        <div class="progress-bar" :style="{ width: progress + '%' }">
          <span style="margin-left: 420px; color: white">{{ progress }}%</span>
        </div>
        <p class="progress-text">{{ progressText }}</p>
      </div>
    </div>
    <div class="loadingright">
      <!-- 图片和文字容器，使用Vue的数据绑定和定时器来更新 -->
      <div class="image-text-container" style="margin-top: 80px; width: 800px; padding-left: 50px">
        <h1 style="font-size: 32px; text-align: center">课程知识点</h1>
        <p style="
            font-size: 26px;
            padding-top: 50px;
            padding-right: 100px;
            padding-bottom: 30px;
            padding-left: 50px;
          ">
          &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{ currentText }}
        </p>
        <img src="../assets/gr.png" v-show="currentIndex == 0" alt="Loading Image"
          style="width: 650px; height: 350px; padding-left: 70px" />
        <img src="../assets/loadingpicture/loading2.jpg" v-show="currentIndex == 1" alt="Loading Image"
          style="width: 650px; height: 350px; padding-left: 70px" />
        <img src="../assets/loadingpicture/loading3.jpg" v-show="currentIndex == 2" alt="Loading Image"
          style="width: 650px; height: 350px; padding-left: 70px" />
        <img src="../assets/loadingpicture/loading4.jpg" v-show="currentIndex == 3" alt="Loading Image"
          style="width: 650px; height: 350px; padding-left: 70px" />
        <img src="../assets/loadingpicture/load5.jpg" v-show="currentIndex == 4" alt="Loading Image"
          style="width: 650px; height: 350px; padding-left: 70px" />
      </div>
    </div>
  </el-container>
</template>

<script lang="ts">
import { computed, onBeforeUnmount, ref, watch, onMounted } from "vue";
import { ElMessage, genFileId } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { Document, UploadFilled } from "@element-plus/icons-vue";
import axios from "axios";

import "../assets/css/loading.css";

export default {
  name: "DocumentIpt",
  components: { Document, UploadFilled },
  setup() {
    const { useStore } = require("../store/index.js");
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const showPopup = ref(false);
    const showProgressBar = ref(false);
    const progress = ref(0);
    const progressStatus = ref();
    const drawerVisible = ref(false);
    const fileContent = ref();
    const loading = ref(false);
    const uploadSuccessReturnId = ref(null);

    let uploadParams = computed(() => {
      return {
        course_id: route.query.courseId,
        time_stamp: Date.now(),
      };
    });

    //当前是否已经上传了文件
    const flag = ref(false);
    const btnLoading = ref(false);
    const extrLoading = ref(false);
    const fileId = ref();
    const fileData = ref();

    localStorage.setItem("courseId", `${route.query.courseId}`);

    watch([route], ([nRoute], [pRoute]) => {
      btnLoading.value = false;
      extrLoading.value = false;
    });
    const goToSearchPage = function () {
      router.push({
        name: "Home",
      });
    };

    //测试
    const gotoNext = function () {
      store.text = "文档预览";
      router.push({
        name: "ShowDocument",
      });
    };

    const upload = ref<UploadInstance>();

    /**  这个函数是为了处理用户尝试上传超过限制的文件数量的情况。当这种情况发生时，
     * 它会清除已上传的文件列表，为新文件分配一个唯一ID，并开始处理这个新文件。
     **/
    const handleExceed: UploadProps["onExceed"] = (files) => {
      console.log(upload);
      btnLoading.value = false;
      upload.value!.clearFiles();
      const file = files[0] as UploadRawFile;
      file.uid = genFileId();
      upload.value!.handleStart(file);
    };

    const submitUpload = () => {
      if (!fileData.value) {
        ElMessage.error("请选择文件！");
        return;
      }
      btnLoading.value = true;
      upload.value!.submit();
    };

    const handleRemove = () => {
      fileData.value = "";
    };
    const handleBeforeUpload = (file: File) => {
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        ElMessage.error("上传的文件大小不能超过 100MB!");
      }
      btnLoading.value = true;
      return isLt2M;
    };

    // // 将教材文档发往后端
    // const url = 'http://10.21.22.111:5000/upload';
    // const customUpload = (options: { file: string | Blob; }) => {
    //   // 自定义上传行为
    //   const formData = new FormData();
    //   formData.append('file', options.file);
    //
    //   return new Promise((resolve, reject) => {
    //     fetch(url, {
    //       method: 'POST',
    //       body: formData
    //     })
    //         .then((response) => {
    //           if (!response.ok) {
    //             throw new Error('Network response was not ok');
    //           }
    //           return  response.text();
    //         })
    //         .then((data) => {
    //           resolve(data);
    //         })
    //         .catch((error) => {
    //           reject(error);
    //         });
    //   });
    // };

    const urlUpload = `${store.extractURI}/upload`;
    const urlChange = `${store.extractURI}/#`;

    const customUpload = (options: { file: any }) => {
      return new Promise((resolve, reject) => {
        const file = options.file;
        uploadFileToUrl(file, urlUpload)
          .then((resolve) => {
            flag.value = true;
            fileId.value = JSON.parse(resolve).file_id;
            ElMessage.success("文件上传成功！");
          })
          .catch((reject) => {
            btnLoading.value = false;
            ElMessage.error("文件上传失败！");
          });
        return;
      });
    };

    const uploadFileToUrl = (file: string | Blob, url: RequestInfo) => {
      const formData = new FormData();
      formData.append("file", file);
      return fetch(url, {
        method: "POST",
        body: formData,
      }).then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        btnLoading.value = false;
        return response.text();
      });
    };

    const changePdfToDocx = (file: string | Blob) => {
      const formData = new FormData();
      formData.append("file", file);

      return fetch(urlChange, {
        method: "POST",
        body: formData,
      }).then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.blob(); // 假设返回的是转换后的 .docx 文件
      });
    };

    const handleSuccess = (response: any, file: any, fileList: any) => {
      flag.value = true;
      fileId.value = response.file_id;
      btnLoading.value = false; // 确保在上传成功后关闭加载状态
      ElMessage({
        message: '文件上传成功！',
        type: 'success',
        duration: 2000
      });
      console.log(response.id);
      uploadSuccessReturnId.value = response.id;
    };

    const handleError = (err: any, file: any, fileList: any) => {
      btnLoading.value = false; // 确保在上传失败后也关闭加载状态
      ElMessage({
        message: '文件上传失败！',
        type: 'error',
        duration: 2000
      });
      console.log(err);
    };

    const progressText = ref("数据清理中...");
    let intervalId: number | null | undefined = null;
    let slowIntervalId: number | null | undefined = null;
    const startFakeProgress = () => {
      intervalId = setInterval(() => {
        progress.value++; // 每秒增加1%
        if (progress.value >= 90) {
          // 当进度到达90%时，清除快速定时器并启动慢速定时器
          clearInterval(intervalId!);
          startSlowProgress();
        } else if (progress.value === 30) {
          progressText.value = "模型启动中...";
        } else if (progress.value === 50) {
          progressText.value = "知识点抽取中...";
        }
      }, 1250); // 每1.25秒更新一次（但这里我们近似为每秒）

      // // 为了模拟2分钟的进度条，我们设置一个延迟来在2分钟后自动完成
      // setTimeout(() => {
      //   progress.value = 100;
      // }, 120 * 1000); // 2分钟 = 120秒
    };
    // 慢速增加进度的函数
    const startSlowProgress = () => {
      slowIntervalId = setInterval(() => {
        if (progress.value < 98) {
          progress.value++; // 每8秒增加1%
          if (progress.value === 91) {
            progressText.value = "知识点处理中..."; // 可以在95%时更新文本，或者其他你喜欢的点
          }
        } else {
          // 当进度到达98%时，清除定时器
          clearInterval(slowIntervalId!);
          // 可以在这里添加进度完成的后续操作
        }
      }, 8000); // 每8秒更新一次
    };

    // 抽取知识点
    const submittextStructure = () => {
      // 发送 POST 请求
      if (flag.value == true && uploadSuccessReturnId.value) {
        let courseId = route.query.courseId || localStorage.getItem("courseId");
        // loading.value = true;
        // progress.value = 0;
        // progressText.value = "数据清理中...";
        // startFakeProgress();
        extrLoading.value = true;
        const formData = new FormData();
        formData.append('id', uploadSuccessReturnId.value); // 其他字段
        axios
          .post(
            `${store.extractURI}/extract`, formData,
            { timeout: 30 * 60 * 1000 }
          )
          .then((res) => {
            extrLoading.value = false;
            if (res.status == 202) {
              localStorage.setItem("chap", JSON.stringify(res.data));
              ElMessage({
                message: '知识点开始抽取',
                type: 'success',
                duration: 2000
              });
              // progress.value = 100;
              // progressText.value = "抽取完成";
              // progressStatus.value = "success";
              // window.scrollTo(0, 0);
              store.chap = JSON.stringify(res.data);
              router.push({
                name: "ShowDocument",
                query: { courseId: courseId, fileId: fileId.value }, // 使用查询参数传递JSON数据
              });
              flag.value = false;
              // loading.value = false
              upload.value!.clearFiles();
            } else {
              extrLoading.value = false;
              // progress.value = 0;
              // loading.value = false
              ElMessage.error(`${res.status}接口响应错误`);
            }
          })
          .catch((error) => {
            console.error(error);
            extrLoading.value = false;
            // progress.value = 0;
            // progressStatus.value = "exception";
            // progressText.value = "知识点生成失败";
            // loading.value = false
            clearInterval(intervalId!);
            intervalId = null;
            ElMessage.error("知识点生成失败！");
          });
        return;
      } else {
        ElMessage.error("请先上传文件");
      }
    };
    const handleFileChange = (file: { raw: Blob | null }) => {


      const reader = new FileReader();
      reader.onload = (e) => {
        // 确保 e.target 不是 null
        if (e.target) {
          fileContent.value = e.target.result;
          // drawerVisible.value = true;
        } else {
          ElMessage.error("文件读取失败");
        }
      };
      if (file && file.raw) {
        // fileData.value = file;
        // reader.readAsText(file.raw);
      } else {
        ElMessage.error("选择的文件无效");
      }
    };

    // 关闭抽屉
    const handleClose = () => {
      drawerVisible.value = false;
      // fileContent.value = '';
    };

    // const images = [
    //
    // ];
    const texts = [
      "课程知识点是指一门课程中需要学生掌握和理解的基本概念、原理、方法、技能等核心内容。这些知识点是构成课程框架的基石，是学生获取新知识、形成新技能、提升思维能力的关键。",
      "基础性：课程知识点是课程的基础和核心，是学生理解和掌握课程的前提。它们为学生提供了必要的概念、原理和方法，是学生进一步学习和发展的基础。",
      "系统性：课程知识点之间往往存在紧密的逻辑关系，形成一个有机的系统。学生需要理解和掌握这些知识点之间的联系，形成完整的知识体系。",
      "实用性：课程知识点应该具有实际应用价值，能够帮助学生解决实际问题。通过学习和掌握这些知识点，学生可以提高自己的实践能力和创新能力。",
      "可评估性：课程知识点应该具有可评估性，教师可以通过测试和作业等方式来检验学生对知识点的掌握程度。这有助于教师了解学生的学习情况，及时调整教学策略。",
      // ... 其他文本
    ];
    const currentIndex = ref(0); // 当前显示的图片和文本的索引

    // 图片和文字切换逻辑
    const switchImageAndText = () => {
      currentIndex.value = (currentIndex.value + 1) % texts.length;
    };

    let imageTextTimer: number | null = null; // 初始化为 null 是个好习惯，以防在其他地方意外使用

    // 响应式引用，用于模板中
    // const currentImage = computed(() => images[currentIndex.value]);
    const currentText = computed(() => texts[currentIndex.value]);

    onMounted(() => {
      imageTextTimer = setInterval(switchImageAndText, 10000); // 每3秒切换一次
    });

    // 清除定时器
    onBeforeUnmount(() => {
      if (imageTextTimer) {
        // 简化检查，因为 imageTextTimer 不可能是 undefined
        clearInterval(imageTextTimer);
        imageTextTimer = null; // 清除定时器后，将变量设置为 null
      }
      clearInterval(intervalId!);
    });

    return {
      upload,
      store,
      handleExceed,
      submitUpload,
      goToSearchPage,
      gotoNext,
      customUpload,
      handleSuccess,
      handleError,
      submittextStructure,
      showProgressBar,
      progress,
      progressStatus,
      drawerVisible,
      fileContent,
      handleClose,
      handleFileChange,
      showPopup,
      loading,
      currentText,
      switchImageAndText,
      currentIndex,
      progressText,
      btnLoading,
      extrLoading,
      uploadParams,
      handleRemove,
      handleBeforeUpload,
    };
  },
};
</script>

<style lang="less" scoped>
.documentIpt_all {
  height: 100vh;
  background-image: url(../assets/main_bg.jpg);
  background-size: cover;
}

.documentIpt_header {
  padding: 0;
  background-size: cover;
  position: relative;

  p {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #304156;
    font-weight: 700;
    font-size: 35px;
  }

  p.shifted {
    transform: translateX(-550px);
    /* 原页面内容左移 */
    transition: transform 0.3s;
    /* 平滑过渡效果 */
  }

  .p_bottom {
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translateX(-50%);

    /deep/ .el-breadcrumb__item>span {
      color: #ffffff;
      font-size: 15px;
      font-weight: normal;
    }
  }

  .p_bottom.shifted {
    transform: translateX(-480px);
    /* 原页面内容左移 */
    transition: transform 0.3s;
    /* 平滑过渡效果 */
  }

  .long-arrow-left {
    font-size: 24px;
    /* 设置字体大小 */
    font-weight: bold;
    /* 设置字体加粗 */
    margin-left: 5px;
  }

  .documentIpt_btn {
    position: absolute;
    top: 100px;
    /* 相对于页面的右上角定位 */
    right: -5px;
    /* 相对于页面的右上角定位 */
    background-color: transparent;
    /* 清除背景色 */
    border: none;
    /* 清除边框 */
    color: #fff;
    /* 设置文字颜色 */
    text-align: center;
    cursor: pointer;
    z-index: 99999999 !important;
  }
}

.documentIpt_main {
  padding: 0;
  height: 460px;
  position: relative;

  .left {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);
    width: 650px;
    height: 400px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 8px #a8b6c7;

    .upload {
      height: 55%;
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: 500px;
      padding: 0;
      margin: 0;
      border: 1px dashed #ccc;
      border-radius: 10px;
      background: #3daefe0d;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .buttons-container {
      display: flex;
      justify-content: center;
      gap: 100px;
      /* 添加按钮之间的间距 */
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
    }

    .documentIpt_btn {
      margin-top: 250px;
    }
  }

  //.readin{
  //  margin-left: 340px;
  //  margin-top: 240px;
  //  margin-right: 340px;
  //}
  /* 进度条样式 */
  //.progress-bar {
  //  width: 60%;
  //  margin-top: 20px;
  //  margin-left: auto; /* 自动计算左边距 */
  //  margin-right: auto; /* 自动计算右边距 */
  //}
}

//.documentIpt_footer {
//  margin-left: 480px;
//
//  .documentIpt_btn {
//    margin-right: 100px;
//    width: 100px;
//    height: 50px;
//    background-color: #b49c73;
//    border-color: #b49c73;
//    color: black;
//    font-size: 20px;
//    font-weight: 800;
//  }
//}
.side-panel {
  position: fixed;
  top: 5px;
  right: -100%;
  bottom: 0;
  width: 600px;
  background: #f9f9f9;
  z-index: 2;
  overflow-y: auto;
  transition: right 0.3s;
  border: 1px solid #eaeaea;
  /* 添加边框 */
  box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.title-container {
  padding: 0;
  background: #b49c73;
  /* 标题背景色 */
  border-bottom: 1px solid #eaeaea;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  /* 使容器变为flex布局 */
}

.title {
  font-size: 25px;
  font-weight: bold;
  margin: 0;
  color: white;
}

.side-panel.active {
  right: 0;
  /* 显示侧边面板 */
}

.file-content {
  padding: 20px;
  word-wrap: break-word;
  /* 允许长单词换行 */
  white-space: pre-wrap;
  /* 保持换行和空格 */
  height: 635px;
  /* 设置一个最小高度，以便内容能够显示 */
  overflow-y: auto;
  /* 内容过多时允许滚动 */
}

.close-btn {
  display: block;
  width: 81%;
  padding: 0;
  background-color: transparent;
  /* 清除背景色 */
  border: none;
  /* 清除边框 */
  color: #b49c73;
  /* 设置关闭按钮文字颜色 */
  text-align: center;
  cursor: pointer;
}

/* 移除点击时的背景颜色变化效果 */
.close-btn:hover {
  background-color: transparent;
}

.close-btn .el-icon--close {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 40px;
  /* 调整图标大小 */
  cursor: pointer;
}

.left.shifted {
  transform: translateX(-650px);
  /* 原页面内容左移 */
  transition: transform 0.3s;
  /* 平滑过渡效果 */
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 999;
  width: 300px;
  height: 200px;
  pointer-events: none;
  /* 使弹窗外的内容不可操作（没管用） */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
}

.popup-content {
  display: flex;
  //align-items: center;
  //justify-content: center;
  justify-content: flex-start;
  /* 靠左对齐 */
  //align-items: center; /* 垂直居中 */
  //justify-content: space-between; /* 居中对齐，并允许进度条和文本之间的间隔 */
  align-items: center;
  /* 垂直居中 */
  flex-wrap: wrap;
  /* 允许换行 */
}

.progress-bar {
  height: 20px;
  background-color: #4caf50;
  border-radius: 5px;
  transition: width 0.5s ease-in-out;
}

span {
  margin-left: 10px;
}

.loadingall {
  height: 100vh;
  width: 100vw;
  display: flex;

  /* 使用 Flexbox 布局 */
  .loadingleft {
    background-color: #b49c73;
    //width: 600px;
    //height: 700px;
    flex: 0 0 40%;
    /* 占据 40% 的宽度，并且不会收缩或增长 */
  }

  .loadingright {
    //width: 800px;
    //height: 700px;
    flex: 0 0 60%;
    /* 占据 40% 的宽度，并且不会收缩或增长 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
  }
}

.progress-container {
  margin-left: 80px;
  width: 60%;
  /* 或其他你需要的宽度 */
  height: 20px;
  /* 或其他你需要的高度 */
  background-color: #f5f5f5;
  /* 可选：为容器设置背景色 */
  border-radius: 5px;
}

.progress-bar {
  height: 100%;
  background-color: #007bff;
  /* 进度条的颜色 */
  transition: width 0.5s ease;
  /* 可选：添加过渡效果 */
}

.progress-text {
  //font-size: 50px;
  color: white;
  margin-left: 10px;
}

/deep/ .el-loading-spinner {
  width: 100% !important;
  height: 50px !important;
  /*这个是自己想设置的 gif 加载动图*/
  background-image: url("@/assets/loading2.gif") !important;
  background-repeat: no-reimportantat !important;
  background-size: 50px 50px !important;
  background-position: center;
  /*覆盖 element-ui  默认的 50%    因为此处设置了height:100%,所以不设置的话，会只显示一半，因为被top顶下去了*/
  position: relative;
  /* 设置相对定位 */
}

/deep/ .el-loading-spinner::after {
  content: "正在生成知识点";
  color: #007bff;
  font-size: 15px;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px;
}

/deep/.el-upload-dragger {
  padding: 0;
  /* 去除内边距 */
  margin: 0;
  /* 去除外边距 */
  border: none !important;
  /* 如果有边框也去除 */
  background-color: transparent !important;
}

/deep/.el-upload-list {
  width: 80%;
}

/deep/.el-upload-list__item-status-label {
  display: block;
  right: 30px !important;
  top: 2px !important;
}

/deep/.el-icon--upload {
  font-size: 40px !important;
  margin-right: 10px;
}

.el-upload-area {
  width: 100%;
  height: 100%;
  display: flex;
  /* 使用弹性布局来确保内容居中 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  position: relative;

  .loading {
    width: 100%;
    height: 100%;
    background: rgba(222, 225, 227, 0.9);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #007bff;
    font-size: 15px;

    img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
  }
}

/deep/.el-loading-mask {
  background: rgba(222, 225, 227, 0.9) !important;
}
</style>
